<template>
  <div>
    <div class="header">
    
        <div class="left" @click="$router.go(-1)">
            <!-- <router-link to="/showing" tag="div"> -->
          <i class="iconfont icon-fork"></i>
            <!-- </router-link> -->
        </div>
      <div class="title">当前城市--{{name}}</div>
    </div>
    <SearchBox :CitiesList="CitiesList"/>
    <div class="mint-indexlist city-index">
      <div class="recommend-city">
        <div class="gprs-city">
          <div class="city-index-title">GPS定位你所在城市</div>
          <ul class="city-index-detail cleanfix">
            <li class="city-item-detail city-item-detail-gprs">
              <div class="city-item-text">定位失败</div>
            </li>
          </ul>
        </div>
        <div class="hot-city">
          <div class="city-index-title">热门城市</div>
          <ul class="city-index-detail">
            <li class="city-item-detail" v-for="(time, index) in hotlist" :key="index" @click="hadleTocity(time.name,time.cityId)">
              <div class="city-item-text">{{time.name}}</div>
            </li>
          </ul>
        </div>
      </div>
      <ul class="mint-indexlist-content" style="margin-right: 17px; height: 553px" ref="root">
        <!-- 城市列表 -->
        <li class="mint-indexsection city-index-section sort" v-for="(time, index) in list" :key="index" >
          <p class="mint-indexsection-index">{{time.index}}</p>
          <ul class="city-list">
            <li class="city-item-detail-white" v-for="(t, index) in time.list" :key="index" @click="hadleTocity(t.name,t.cityId)">
              <div class="in-section">{{t.name}}</div>
            </li>
          </ul>
        </li>
        <!-- 城市列表结束 -->
      </ul>

      <!-- 选择城市索引 -->
      <div class="mint-indexlist-nav">
        <ul class="mint-indexlist-navlist">
          <li class="mint-indexlist-navitem" @touchstart="Thecity(index)" v-for="(t , index) in list" :key="index">{{t.index}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import SearchBox from "@/components/SearchBox/index.vue";
import { reactive, toRefs, onMounted , ref, computed } from "vue";
import { CityData } from "@/api/index.js";
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';

export default {
  name: "City",
  components: {
    SearchBox,
  },
  setup(props) {
    const state = reactive({
      list: [],
      hotlist: [],
      CitiesList:[]
    });
    onMounted(() => {
      CityList();
    
    });

    //城市索引
    let root = ref(null)
   
    const Thecity = ((index)=>{
     let p = root.value.getElementsByTagName('p')
     root.value.parentNode.scrollTop = p[index].offsetTop -140
    })
    const store = useStore();
    const router = useRouter();

    const name = computed(()=>{
      return store.state.city.name
    })

    //提交仓库修改cityid
    const hadleTocity = (name,cityId)=> {
      store.commit('city/CITY_INFO', {name,cityId})
      window.sessionStorage.setItem('nowName',name)
      window.sessionStorage.setItem('nowCityId',cityId)
      router.push('home/showing')
    }

    const CityList = async () => {
      const { data: res } = await CityData();
      if ((res.msg = "ok")) {
        const cities = res.data.cities;
        state.CitiesList=cities
       const { hotlist, list } =  formatCityList(cities);
        state.list = list;
        state.hotlist=hotlist
      }
    };

    const formatCityList = (cities) => {
      const list = [];
      const hotlist = [];

    for (let i = 0; i < cities.length; i++) {
      const firstletter = cities[i].pinyin.substring(0, 1).toUpperCase();
      if (toCom(firstletter)) {
        list.push({
          index: firstletter,
          list: [{ name: cities[i].name, cityId: cities[i].cityId }],
        });
      } else {
        for (let j = 0; j < list.length; j++) {
          if (list[j].index === firstletter) {
            list[j].list.push({
              name: cities[i].name,
              cityId: cities[i].cityId,
            });
          }
        }
      }
    }

     // 排序
      list.sort((a, b) => {
        if (a.index > b.index) {
          return 1;
        } else {
          return -1;
        }
      });

      // 热门城市
      for (let i = 0; i < cities.length; i++) {
        if (cities[i].isHot === 1) {
          hotlist.push(cities[i]);
        }
      }

      function toCom(firstletter) {
        for (let i = 0; i < list.length; i++) {
          if (list[i].index === firstletter) {
            return false;
          }
        }
        return true;
      }
      return {
        list,
        hotlist,
      };
};
    return {
      ...toRefs(state),
      Thecity,
      root,
      hadleTocity,
      name
    };
  },
};
</script>

<style lang="less" scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 44px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  z-index: 300;
  display: flex;
  background: #fff;
  .title {
    width: 72%;
    text-align: center;
    font-size: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #191a1b;
  }
  .left {
    width: 14%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    > i {
      margin-left: 10px;
      font-size: 19px;
    }
  }
}

/deep/.van-nav-bar .van-icon {
  color: #111;
}

.root {
  width: 100%;
  height: 100%;
  background: white;
}
.van-nav-bar {
  position: fixed;
  width: 100%;
}
.mint-indexlist {
  width: 100%;
  position: relative;
  overflow: hidden;

  .recommend-city {
    background-color: #fff;
    padding-left: 15px;
    padding-top: 15px;

    .city-index-title {
      font-size: 13px;
      color: #797d82;
      margin-bottom: 10px;
    }
    .city-index-detail {
      display: flex;
      justify-content: flex-start;
      align-content: center;
      flex-wrap: wrap;

      .city-item-detail {
        width: calc(33.33333vw - 11px);
        text-align: center;
        padding-bottom: 15px;
        box-sizing: border-box;
        float: left;

        .city-item-text {
          height: 30px;
          background-color: #f4f4f4;
          line-height: 30px;
          border-radius: 3px;
          box-sizing: border-box;
          margin: 0 7.5px;
          font-size: 14px;
          color: #191a1b;
        }
      }
    }
  }
  .city-item-detail {
    width: calc(33.33333vw - 11px);
    text-align: center;
    padding-bottom: 15px;
    box-sizing: border-box;
    float: left;
  }
}
.city-index {
  padding-top: 93px;
  overflow: scroll;
  .mint-indexlist-content {
    height: 100 !important;
  }
  .city-item-text {
    height: 30px;
    background-color: #f4f4f4;
    line-height: 30px;
    border-radius: 3px;
    box-sizing: border-box;
    margin: 0 7.5px;
    font-size: 14px;
    color: #191a1b;
  }
}
.mint-indexlist-nav {
  border: 0;
  position: fixed;
  z-index: 1999;
  width: 17px;
  margin-top: 94px;
}

.mint-indexlist-nav {
  border: 0;
  position: fixed;
  z-index: 1999;
  width: 17px;
  margin-top: 94px;

  top: 0;
  bottom: 0;
  right: 0;
  background-color: #fff;
  text-align: center;
  justify-content: center;
}
.mint-indexlist-nav,
.mint-indexlist-navlist {
  max-height: 100%;
  display: flex;
  flex-direction: column;
  .mint-indexlist-navitem {
    font-size: 12px;
    padding:1px;
  }
}
.city-list {
  display: flex;
  display: flex;
  justify-content: flex-start;
  align-content: center;
  flex-wrap: wrap;

  .city-item-detail-white {
    color: #191a1b;
    position: relative;
    box-sizing: border-box;
    height: 48px;
    width: 100%;

    .in-section {
      background-color: #fff;
      height: 100%;
      line-height: 48px;
      font-size: 14px;
      border-bottom: 1px solid #ededed;
      padding-left: 20px;
    }
  }
}
.mint-indexsection-index {
  background-color: #f4f4f4;
  color: #797d82;
  padding: 0 0 0 15px;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  font-size: 14px;
}
</style>